﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="index" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
    <head>
        <title> PORTAL SÃO PAULO </title>
	    <link rel="stylesheet" type="text/css" href="geral.css"/>
        <link rel="Stylesheet" type="text/css" href="jquery-ui-1.8.16.custom.css" />
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.maskedinput.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
    </head>
    <body>
	    <div id="global">
            <!-- FAÇO POSIONAMENTE DO SITE AO CENTRO -->
            <div id="geral">
                <div id="containerSite">
	                <!-- TOPO -->
                    <div id="top">
                       <a href="/" title="PORTAL SÃO PAULO"><img src="Imagens/logo-portal-sp.gif" alt="PORTAL SÃO PAULO" title="PORTAL SÃO PAULO" id="logo" /></a>
                       <span>O SEU INFORMATIVO SOBRE A VIOLÊNCIA</span>
                    </div>
                    <br class="clear" />
                    <!-- /TOPO -->
            	
                    <!-- CORPO -->
                    <div id="corpo">
                        
                        <div id="conteudoPrincipal">
                            <div id="controloNavegacao">
                                <div id="menuNavegacao">
                                    <ul>
                                        <li><a href="javascript:trocarAba('tab1');" class="tab1"><span>Home</span> </a></li>
                                        <li><a href="javascript:trocarAba('tab2');" class="tab2"><span>Cadastrar ocorrência</span></a></li>
                                    </ul>
                                </div>
                            </div>
    
                            <div id="boxGeral">
                                <div id="midBox">
                                    <div id="bgCentral">
                                        
                                        <!-- ABA DA HOME -->
                                        <div id="tab1">
                                            <h1>Estatísticas da cidade de São Paulo</h1>
                                            <div id="mapaHome">
                                                <img src="Imagens/mapa-home.jpg" alt=""  title=""/>
                                            </div>
                                            <div id="lateralHome">
                                                <div id="boxGraficos">
                                                    <table cellpadding="5" cellspacing="0" border="0">
                                                       <tr>
                                                            <td class="barras" align="center" valign="bottom">
                                                                <p><i>0 %</i></p>
                                                                <div id="norte">
                                                                    
                                                                </div>
                                                            </td>
                                                            <td class="barras" align="center" valign="bottom">
                                                                <p><i>0 %</i></p>
                                                                <div id="sul">
                                                                
                                                                </div>
                                                            </td>
                                                            <td class="barras" align="center" valign="bottom">
                                                                <p><i>0 %</i></p>
                                                                <div id="leste">
                                                                
                                                                </div>
                                                            </td>
                                                            <td class="barras" align="center" valign="bottom">
                                                                <p><i>0 %</i></p>
                                                                <div id="oeste">
                                                                
                                                                </div>
                                                            </td>
                                                            <td class="barras" align="center" valign="bottom">
                                                                <p><i>0 %</i></p>
                                                                <div id="centro"></div>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td align="center"><strong>Norte</strong></td>
                                                            <td align="center"><strong>Sul</strong></td>
                                                            <td align="center"><strong>Leste</strong></td>
                                                            <td align="center"><strong>Oeste</strong></td>
                                                            <td align="center"><strong>Centro</strong></td>
                                                        </tr>
                                                    </table>
                                                    <div id="totalGeral">
                                                        <p>Total de ocorrências:</p> <strong><%= total %></strong> 
                                                    </div>
                                                </div>
                                                
                                                <div id="boxLegenda">
                                                   <img src="Imagens/legenda-home.jpg" alt=""  title=""/>
                                                </div>
                                            </div>
                                            
                                        </div>
                                        <!-- /ABA DA HOME -->
                                        
                                        <!-- ABA CADASTRAR -->
                                        <div id="tab2">
                                            <div id="controloRespiroTab2">
                                            <form runat="server">
                                                <div id="escurecer" runat="server"></div>
                                                <div id="boxCPF" runat="server">
                                                    <div id="Cpf">
                                                        <span>Bem vindo à tela de cadastro de ocorrência.</span>
                                                        <br />
                                                        <span>Se você já cadastrou alguma ocorrência neste site coloque CPF no campo abaixo:</span>
                                                        <br /><br />
                                                        <label>Seu CPF:</label> <asp:TextBox ID="verificadorCPF" runat="server"></asp:TextBox> <a href="javascript: retornaCpf()">Enviar</a>
                                                        <br /><br />
                                                        <a href="javascript:escondeBoxExisteCpf()">Não, eu nunca cadastrei ocorrência</a>
                                                    </div>
                                                </div>
                                                <h1>Cadastro de ocorrências</h1>
                                                <span class="requiredField">TODOS OS CAMPOS SÃO OBRIGATÓRIOS*</span>
                                                <div class="ErrorServer" runat="server" ID="ErrorServer" visible="false"></div>
                                                <br /><br />
                                                
                                                <div id="controloForms">
                                                    <fieldset>
                                                        <h2>Seus dados</h2>
                                                        <dl> 
                                                            <dd><label>Nome:</label></dd>
                                                            <dt><asp:TextBox ID="fieldNome" runat="server" CssClass="ajustaCamposForms" MaxLength="255"></asp:TextBox></dt>
                                                        </dl>
                                                        <dl> 
                                                            <dd><label>CPF:</label></dd>
                                                            <dt><asp:TextBox ID="fieldCpf" runat="server" CssClass="ajustaCamposForms" MaxLength="11"></asp:TextBox></dt>
                                                        </dl>
                                                        <dl> 
                                                            <dd><label>Email:</label></dd>
                                                            <dt><asp:TextBox ID="fieldEmail" runat="server" CssClass="ajustaCamposForms" MaxLength="255"></asp:TextBox></dt>
                                                        </dl>
                                                        <dl> 
                                                            <dd><label>Bairro:</label></dd>
                                                            <dt><asp:TextBox ID="fieldBairro" runat="server" CssClass="ajustaCamposForms" MaxLength="50"></asp:TextBox></dt>
                                                        </dl>
                                                    </fieldset>

                                                    <fieldset>
                                                       <h2>Dados da ocorrência</h2> 
                                                        <dl> 
                                                            <dd><label>Endereço da ocorrência:</label></dd>
                                                            <dt><asp:TextBox runat="server" ID="fieldEndereco" CssClass="ajustaCamposForms" MaxLength="255"></asp:TextBox></dt>
                                                        </dl>
                                                        <dl>
                                                            <dd><label>Região:</label></dd>
                                                            <dt>
                                                                <asp:DropDownList runat="server" ID="fieldRegiao" CssClass="ajustaCamposForms">
                                                                    <asp:ListItem Text="Norte" Value="Norte"></asp:ListItem>
                                                                    <asp:ListItem Text="Sul" Value="Sul"></asp:ListItem>
                                                                    <asp:ListItem Text="Leste" Value="Leste"></asp:ListItem>
                                                                    <asp:ListItem Text="Oeste" Value="Oeste"></asp:ListItem>
                                                                    <asp:ListItem Text="Centro" Value="Centro"></asp:ListItem>
                                                                </asp:DropDownList>
                                                            </dt>
                                                        </dl>
                                                        <dl>
                                                            <dd><label>Tipo de ocorrência:</label></dd>
                                                            <dt>
                                                                <asp:DropDownList runat="server" ID="fieldTPOcorr" CssClass="ajustaCamposForms">
                                                                    <asp:ListItem Text="Furto" Value="Furto"></asp:ListItem>
                                                                    <asp:ListItem Text="Assalto" Value="Assalto"></asp:ListItem>
                                                                    <asp:ListItem Text="Agressão" Value="Agressão"></asp:ListItem>
                                                                    <asp:ListItem Text="Latrocínio" Value="Latrocínio"></asp:ListItem>
                                                                    <asp:ListItem Text="Sequestro" Value="Sequestro"></asp:ListItem>
                                                                    <asp:ListItem Text="Invasão" Value="Invasão"></asp:ListItem>
                                                                    <asp:ListItem Text="Outros" Value="Outros"></asp:ListItem>
                                                                </asp:DropDownList>        
                                                            </dt>
                                                        </dl>
                                                        <dl> 
                                                            <dd><label>Data da ocorrência:</label></dd>
                                                            <dt><asp:TextBox runat="server" ID="fieldDtOcorrencia" CssClass="ajustaCamposForms" MaxLength="255"></asp:TextBox></dt>
                                                        </dl>
                                                        <dl> 
                                                            <dd><label>Descrição da ocorrência:</label></dd>
                                                            <dt><asp:TextBox runat="server" ID="fieldDescOcorr" CssClass="ajustaCamposForms" TextMode="MultiLine" Height="100" Width="280"></asp:TextBox></dt>
                                                        </dl>
                                                    </fieldset>
                                                </div>
                                                <br class="clear" />
                                                <div id="controloAbaixoDoForm">
                                                    <span id="caracteres"></span>
                                                    <asp:RequiredFieldValidator id="RequiredFieldValidator1"  ControlToValidate="fieldNome" Text="Campo nome é obrigatório" runat="server" ValidationGroup="cadastroOcorrencia" CssClass="requiredField" />
                                                    <asp:RequiredFieldValidator id="RequiredFieldValidator2"  ControlToValidate="fieldBairro" Text="Campo bairro é obrigatório" runat="server" ValidationGroup="cadastroOcorrencia" CssClass="requiredField" />
                                                    <asp:RequiredFieldValidator id="RequiredFieldValidator3"  ControlToValidate="fieldCpf" Text="Campo CPF é obrigatório" runat="server" ValidationGroup="cadastroOcorrencia" CssClass="requiredField" />
                                                    <asp:RequiredFieldValidator id="RequiredFieldValidator7"  ControlToValidate="fieldEmail" Text="Campo Email é obrigatório" runat="server" ValidationGroup="cadastroOcorrencia" CssClass="requiredField" />
                                                    <asp:RequiredFieldValidator id="RequiredFieldValidator4"  ControlToValidate="fieldEndereco" Text="Campo endereço é obrigatório" runat="server" ValidationGroup="cadastroOcorrencia" CssClass="requiredField" />
                                                    <asp:RequiredFieldValidator id="RequiredFieldValidator6"  ControlToValidate="fieldDescOcorr" Text="Campo descrição da ocorrência é obrigatório" runat="server" ValidationGroup="cadastroOcorrencia" CssClass="requiredField" />
                                                    <asp:RequiredFieldValidator id="RequiredFieldValidator5"  ControlToValidate="fieldDtOcorrencia" Text="Campo data da ocorrência é obrigatório" runat="server" ValidationGroup="cadastroOcorrencia" CssClass="requiredField" />
                                                    
                                                    <asp:CustomValidator ID="customValidator1" runat="server" ErrorMessage="CPF Inválido" ControlToValidate="fieldCpf" Text="CPF Inválido!!" OnServerValidate="ValidateCpf" ValidationGroup="cadastroOcorrencia" CssClass="requiredField" />
                                                    <asp:CustomValidator ID="customValidator2" runat="server" ErrorMessage="Email Inválido" ControlToValidate="fieldEmail" Text="Email Inválido!!" OnServerValidate="ValidateEmail" ValidationGroup="cadastroOcorrencia" CssClass="requiredField" />
                                                    <asp:Button ID="Button1" runat="server" Text="Enviar" ValidationGroup="cadastroOcorrencia" cssclass="btos"/>
                                                </div>
                                            </form>
                                            </div>
                                        </div>
                                        <!-- /ABA CADASTRAR -->

                                    </div>
                                </div>
                                <img src="Imagens/bottom-Box.gif" alt=" " title=" " class="floatRight" />
                            </div>
                        </div>
                        
                    </div>	        
	                <!-- CORPO -->		
                </div>

                <div id="rodape">
                    <ul>
                        <li><a href="index.aspx?aba=tab1">Home</a></li>
                        <li><a href="index.aspx?aba=tab2">Cadastrar Ocorrência</a></li>
                        <li><a href="fale-conosco.aspx">Fale conosco</a></li>
                        <li><a href="termos-de-uso.aspx">Termos de uso</a></li>
                    </ul>
                </div>
            </div>	        
            <br class="clear" />
            <!-- /FAÇO POSIONAMENTE DO SITE AO CENTRO -->
        </div>	 
        <script type="text/javascript">
            function exibirNumeroCaracteres(campo, maximo, spanId) {
                if (campo.value.length > maximo)
                    campo.value = campo.value.substring(0, maximo);
                else if (document.getElementById(spanId))
                    document.getElementById(spanId).innerHTML = maximo - campo.value.length;
            }

            var norte, sul, leste, oeste, centro, total, maior = 0;
            $(function () {
                //vinculo os eventos no textarea
                $("textarea[name='fieldDescOcorr']").bind("keypress, keyup", function () {
                    exibirNumeroCaracteres(document.getElementById("fieldDescOcorr"), 500, "caracteres");
                });
                
                $("#fieldCpf").mask("999.999.999-99");
                $("#verificadorCPF").mask("999.999.999-99");

                $("#fieldDtOcorrencia").datepicker({ dateFormat: 'dd/mm/yy', dayNamesMin:['dom','seg','ter','qua','qui','sex','sab'], monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro']});
                
                norte = '<%= norte %>';
                sul = '<%= sul %>';
                leste = '<%= leste %>';
                oeste = '<%= oeste %>';
                centro = '<%= centro %>';
                total = '<%= total %>';
                var arr = [norte, sul, leste, oeste, centro];


                for (var i = 0; i < arr.length - 1; i++) {
                    if (Math.max(arr[i], arr[i + 1]) > maior)
                        maior = Math.max(arr[i], arr[i + 1]);
                }


                $("#norte").animate({ height: (norte * 100 / maior + "%") }, 1000);
                $("#sul").animate({ height: (sul * 100 / maior + "%") }, 1000);
                $("#leste").animate({ height: (leste * 100 / maior + "%") }, 1000);
                $("#oeste").animate({ height: (oeste * 100 / maior + "%") }, 1000);
                $("#centro").animate({ height: (centro * 100 / maior + "%") }, 1000);

                
                $("#norte").parent().find("i").html(calculaPorcentagem(norte));
                $("#sul").parent().find("i").html(calculaPorcentagem(sul));
                $("#leste").parent().find("i").html(calculaPorcentagem(leste));
                $("#oeste").parent().find("i").html(calculaPorcentagem(oeste));
                $("#centro").parent().find("i").html(calculaPorcentagem(centro));
            });

            function retornaCpf() { 
                var cpf = document.forms[0].verificadorCPF.value;
                $.get("verificar-cadastro.aspx?cpf=" + cpf,
                    function (data) {
                        if ($(data).text() === "" || $(data).text() == null) {
                            alert("cpf não existe ou é inválido");
                            return;
                        }
                        var nome, cpf, email, bairro;
                        nome = $(data).find("InfoUsuario:eq(0)").find("Table1:eq(0)").find("nome:eq(0)").text();
                        cpf = $(data).find("InfoUsuario:eq(0)").find("Table1:eq(0)").find("cpf:eq(0)").text();
                        email = $(data).find("InfoUsuario:eq(0)").find("Table1:eq(0)").find("email:eq(0)").text();
                        bairro = $(data).find("InfoUsuario:eq(0)").find("Table1:eq(0)").find("bairro:eq(0)").text();

                        document.forms[0].fieldNome.value = nome;
                        document.forms[0].fieldCpf.value = cpf;
                        document.forms[0].fieldEmail.value = email;
                        document.forms[0].fieldBairro.value = bairro;
                        escondeBoxExisteCpf();
                    }
                );
            }

            function escondeBoxExisteCpf() {
                $("#escurecer").hide();
                $("#boxCPF").hide();
            }

            function calculaPorcentagem(vlr) {
                var tempVlr = vlr * 100 / total;
                tempVlr = tempVlr.toString();
                return tempVlr.substring(0, 5) + "%";
            }
            
            var anterior = false;
            function trocarAba(id) {
                if (anterior) {
                    $('#' + anterior).hide();
                    $('.' + anterior).removeClass('abaMarcada');
                }
                $('.' + id).addClass('abaMarcada');
                $('#' + id).show();
                anterior = id;
            }

            <%if(!IsPostBack){ %>
                if(location.search.indexOf("=") > -1)
                    trocarAba(location.search.split("aba=")[1]);
                else
                    trocarAba('<%= abaMarcada %>');
            <% } %>
            <% else { %>
                trocarAba('<%= abaMarcada %>');
            <%} %>
        </script>
    </body>
</html>
